<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>API文档</title>
    <script src="../../static/kaige/js/szload.js"></script>
</head>

<body>

    <div class="kaige-body">
        <blockquote class="layui-elem-quote layui-text">
            API文档说明
        </blockquote>
        <div class="layui-collapse" lay-accordion="" lay-filter="test">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">后台前端</h2>
                <div class="layui-colla-content layui-show">
                    <div class="layui-tab">
                        <ul class="layui-tab-title">
                            <li class="layui-this">数据交互</li>
                            <li>路径路由</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show" style="height: calc(100vh - 300px);overflow: auto;">
                                与服务端数据交互，使用的是jQuery的ajax；因对数据进行签名验证，故对jquery.ajax进行了栏截处理（$.ajax），使用时可以使用 szoa.ajax 等同 $.ajax(也支持)
                                <hr/>
                                <span class="red">调用：先调用jquery > 依赖（qs.js,cry/md5.js,cry/sha1.js） > szoa.js > layui，顺序不能变；</span><br/>
                                szoa.ajax 续 原jquery.ajax 所有参数，增加 sign:1 ,dataHaveArray:1 两个参数，具体看下文
                                <hr/>
                                <pre class="layui-code" lay-title="例：上传文件时用ajax" lay-lang="JavaScript">
var formData = new FormData();
formData.append('file', blob, oldfilename);
formData.append('id', getQueryString('id')); // 其它参数，这个id来自地址栏 ?id=7
szoa.ajax({ // 这里写 $.ajax 也可以。
    type: "POST", // 上传文件一定要填 POST 
    url: "/files/upfiles", // 地址： /控制器/方法
    data: formData,
    processData: false, // 上传文件 必填 false
    contentType: false, // 上传文件 必填 false
    sign: 1, // 不需要签名: 必填 sing:1  因上传文件无法签名二进制数据，后台验证 hash
    success: function (res) {
        if (res.status) {
            layer.msg(res.msg, { icon: 1 });
            layer.closeAll('page');
            return_parent({ // 这是上传文件页面与 您功能页面交互的，功能页面属于父页面
                url: res.data.files[0].url,
                id: res.data.files[0].id,
                type: res.data.files[0].type,
                other: res.data.files
            });
        } else {
            layer.alert(res.msg, { icon: 2 });
        }
    }
});


//$.get 也行 只有三个参数 
//param  1、url 2、数据,3、回调函数
//支持第二参数就是回调函数(即不用传数据给后端)
szoa.get('/log/index',function (result) {
    if (result.status) {
        // to do ...
    }
});
szoa.get('/log/index',{id:2},function (result) {
    if (result.status) {
        // to do ...
    }
});
 
// 简单POST  只有三个参数且必传三个参数
szoa.post('/login/index',data,function (res) {
    // to do ...
});

// 复杂POST 用 .ajax
szoa.ajax({
    url: '/files/moveGroup',
    data: updata,
    dataHaveArray: 1, // 传这个值 意思是 要处理表单数据里含数组 如 input name='abc[]'
    type:'POST',
    success: function (res1) {
        if (res1.status) {
        // to do ...
        }
    }
});


                                </pre>
                            </div>
                            <div class="layui-tab-item">
<pre>
目录：
index.html   -- 入口文件
lib          -- 第三方
static       -- 图片、样式、JS、其它静态资源文件 
pages        -- 页面
README.md

路由与后台节点相似，后台模块名改成pages，多级控制器转化多级目录，权限控制与后端类似，也是把模块名替换成pages进行判断是否有权限
例： 某页面 后台 backend/xxxx/index 方法  对应 前端  pages/xxxx/index.html 页面。
    某页面多级控制器，backend/xxx.xxxxx/add 对应前端 pages/xxx/xxxxx/add.html 页面。

    主页:前端主页即：根目录下index.html入口文件。 后台对应 backend/index/index --只判断登录

    登录页：前端在pages/login.html,后台对应 backend/login/index -- 无权限、登录判断

    上传页：前端在pages/files/upfiles.html,后台对应 backend/files/upfiles 根据后端分配权限

所有layui扩展 均放 /static/kaige/layuiextend/ 目录下，允许再建子目录区分。
所有共性JS 均放 /static/kaige/js/ 目录下，允许再建子目录区分。
所有样式（共性）均放 /static/kaige/css/ 目录下，允许再建子目录区分。

单页CSS,JS 都放在单页html里,css 放head  js放 body 底部
</pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">手机端(uni-app)</h2>
                <div class="layui-colla-content">
                    <div class="layui-code" lay-title="手机端">

                    </div>
                </div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">后台</h2>
                <div class="layui-colla-content">
                    <div class="layui-tab">
                        <ul class="layui-tab-title">
                            <li class="layui-this">数据交互</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show" style="height: calc(100vh - 300px);overflow: auto;">
                                <pre class="layui-code" lay-title="接收前端数据特别说明" lay-lang="ThinkPHP6">
后台接收数据（含数组转输的）：
post 到后端数据，如果含数组，已做处理；例：表单里 input name='files_ids[]'
// 接收例子如下：
// 接收表单数组的处理  files_ids 名称对应 表单里的
    $data = $this->request->param();
    $arr_count = $data['files_ids']; // 这个变量，前端传过来的是 数组长度 （非下标，最大下标得 -1）；
    $newArr = [];
    for ($i = 0; $i < $arr_count; $i++) {
    $keyname = 'files_ids_' . $i; // 与前端保持统一 如表单里 name="files_ids[]" 则这里是 files_ids_  xxxx[]对应xxxx_
    if (isset($data[$keyname]) && $data[$keyname] != '') {
        $newArr[] = $data[$keyname];
    }
    }
    $indata = [
    'files_ids' => $newArr, // 这是重新合并一起的数组 [1,2,3,4,5,6]
    'group_id' => $data['group_id']
    ];
//接收数据处理，放在控制器里。控制器负责与前端数据对接。
//疑问：为什么要这么处理，原因，数据签名失败，如遇[]会与后端不一致，故做传输转换。
                                </pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">常见错误</h2>
                <div class="layui-colla-content">
                    <div class="layui-code" lay-title="常见错误">
常见错误
签名失败
1、检查前端是否对字符串进行 encodeURIComponent进行转换，后台是否进行解析
2、...
PHP错误
1、先检查一下，传入参数是否正确； 调试方法，在悬疑处 return _err('输出内容',[参数是啥]);  控制器处 直接 return json(业务层的返回代码);
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        load_init_js(function () {
            layui.use(['element', 'layer', 'code'], function () {
                var element = layui.element;
                var layer = layui.layer;
                var $ = layui.$;
            

                layui.code({
                // lang: ''
                });
                $.get('',{id:encodeURIComponent})
            });
        });
    </script>
</body>

</html>